<template>

	<!--
		此页面需要换一个接口，地址是：https://netease2.bluej.cn/comment/playlist?id=2414243220
		参考地址是：https://music.163.com/m/playlist?id=2414243220
		
		这里的点赞添加按钮没完成，我#￥%……&*
	-->
	<div class="m-talk " data-reactid="386">
		<div class="m-comments">
			<h4 class="cmt_title">精彩评论</h4>
			<div class="cmt_list">
				<div class="cmt_item" v-for="(item,index) in list">
					<div class="cmt_head">
						<a class="userphoto">
							<img :src="item.user.avatarUrl" alt="">
							<span class="ava-icon ava-icon-daren" v-if="item.user.expertTags"></span>
						</a>
					</div>
					<div class="cmt_wrap f-bd f-bd-btm">
						<div class="cmt_header">
							<div class="cmt_meta">
								<span class="cmt_user">
									<a class="nickname">{{item.user.nickname}}</a>
									<i class="vip vip-associator" v-if="item.user.vipRights"></i>
								</span>
								<div class="cmt_time">
									<span>{{timestampToTime(item.time)}}</span>
								</div>
							</div>
							<div class="cmt_like" @click="addliked(index)">
								<span class="cmt_likearea">
									<span class="cmt_count">{{item.likedCount}}</span>
								<i class="cmt_likeicn">
										<svg class="u-svg u-svg-unzancmt" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 28 28">
											<path fill="#999" d="m25.857 14.752c-.015.059-1.506 5.867-2.932 8.813-1.162 2.402-3 2.436-3.099 2.436h-12.826v-13c3 0 5.728-4 5.728-7.275 0-3.725 1.433-3.725 2.142-3.725 1.327 0 1.978 1.345 1.978 4 0 2.872-.832 4.525-.839 4.537-.161.31-.155.682.027.981.181.299.5.482.849.482h6.942c.922 0 1.551.215 1.866.64.467.626.286 1.705.164 2.112m-23.857 10.248v-10c0-1.795.659-1.981.855-2h2.145v13h-2.173c-.829 0-.827-.648-.827-1m25.309-13.54c-.713-.969-1.886-1.46-3.482-1.46h-5.519c.26-.932.519-2.285.519-4 0-5.221-2.507-6-4-6-1.909 0-4.185.993-4.185 5.725 0 2.206-1.923 5.275-3.815 5.275h-4-.011c-1.034.011-2.816.862-2.816 4v10.02c0 1.198.675 2.979 2.827 2.979h16.971.035c.364 0 3.224-.113 4.894-3.564 1.514-3.127 3.01-8.942 3.056-9.14.071-.23.664-2.289-.474-3.836"></path>
										</svg>
									</i>
								</span>
							</div>
						</div>
						<div class="cmt_content">
							<span class="cmt_text">
								{{item.content}}
							</span>
						</div>
					</div>
				</div>
			</div>
		</div>
		<div class="m-comments" v-if="total">
			<h4 class="cmt_title">最新评论({{total}})</h4>
			<div class="cmt_list">
				<div class="cmt_item" v-for="item in List">
					<div class="cmt_head">
						<a class="userphoto">
							<img :src="item.user.avatarUrl">
						</a>
					</div>
					<div class="cmt_wrap f-bd f-bd-btm">
						<div class="cmt_header">
							<div class="cmt_meta">
								<span class="cmt_user">
									<a class="nickname">{{item.user.nickname}}</a>
								</span>
								<div class="cmt_time">
									<span>{{timestampToTime(item.time)}}</span>
								</div>
							</div>
							<div class="cmt_like">
								<span class="cmt_likearea">
									<span class="cmt_count" v-if="item.likedCount!=0">{{item.likedCount}}</span>
								<i class="cmt_likeicn">
										<svg class="u-svg u-svg-unzancmt" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 28 28">
											<path fill="#999" d="m25.857 14.752c-.015.059-1.506 5.867-2.932 8.813-1.162 2.402-3 2.436-3.099 2.436h-12.826v-13c3 0 5.728-4 5.728-7.275 0-3.725 1.433-3.725 2.142-3.725 1.327 0 1.978 1.345 1.978 4 0 2.872-.832 4.525-.839 4.537-.161.31-.155.682.027.981.181.299.5.482.849.482h6.942c.922 0 1.551.215 1.866.64.467.626.286 1.705.164 2.112m-23.857 10.248v-10c0-1.795.659-1.981.855-2h2.145v13h-2.173c-.829 0-.827-.648-.827-1m25.309-13.54c-.713-.969-1.886-1.46-3.482-1.46h-5.519c.26-.932.519-2.285.519-4 0-5.221-2.507-6-4-6-1.909 0-4.185.993-4.185 5.725 0 2.206-1.923 5.275-3.815 5.275h-4-.011c-1.034.011-2.816.862-2.816 4v10.02c0 1.198.675 2.979 2.827 2.979h16.971.035c.364 0 3.224-.113 4.894-3.564 1.514-3.127 3.01-8.942 3.056-9.14.071-.23.664-2.289-.474-3.836"></path>
										</svg>
									</i>
								</span>
							</div>
						</div>
						<div v-for="pd in item.beReplied">
							<div class="cmt_content" v-if="pd.user">
								<span class="cmt_text">
									回复
									<a class="at">
										@{{pd.user.nickname}}:
									</a>
								</span>
								<span class="cmt_text">
									{{item.content}}
								</span>
							</div>
							<div class="cmt_replied f-bd f-bd-full">
								<span class="cmt_replied_user">
									@{{pd.user.nickname}}:
								</span>
								<span class="cmt_replied_cnt">
									<span class="cmt_text">
										{{pd.content}}
									</span>
								</span>
							</div>
						</div>
						<div class="cmt_content" v-if="item.beReplied.length == 0">
							<span class="cmt_text">{{item.content}}</span>
						</div>
					</div>
				</div>
			</div>
		</div>
		<div class="cmt_more f-bd f-bd-top"><span class="box"><!-- react-text: 774 -->查看全部<!-- /react-text --><!-- react-text: 775 -->206<!-- /react-text --><!-- react-text: 776 -->条评论<!-- /react-text --><i></i></span></div>
	</div>
</template>

<script>
	import api from '.././api/index.js'
	export default {
		mounted() {
			// 做AJAX请求
			this._initData()
		},
		data() {
			return {
				list: "",
				List: "",
				total: "",
			}
		},
		methods: {
			_initData() {
				return new Promise((resolve, reject) => {
					var xhr = new XMLHttpRequest();
					xhr.open("GET", api.Comment + "?id=" + this.$route.params.id);
					xhr.send();
					xhr.addEventListener("readystatechange", function() {
						if(xhr.readyState == 4) {
							if(xhr.status == 200) {
								resolve(xhr.response);
							}
						}
					})
				}).then((res) => {
					this.list = JSON.parse(res).hotComments
					this.List = JSON.parse(res).comments
					this.total = JSON.parse(res).total
				})
			},
			timestampToTime(timestamp) {
				var date = new Date(timestamp);
				var Y = date.getFullYear() + '年';
				var M = (date.getMonth() + 1 < 10 ? '0' + (date.getMonth() + 1) : date.getMonth() + 1) + '月';
				var D = date.getDate() + '日';
				return Y + M + D;
			},
			addliked(i) {
				var changes = document.getElementsByClassName("cmt_count")
				//				var addliked = this.list[i].likedCount
				changes.innerText += 1
				console.log(changes)
			}
		},
	}
</script>

<style scoped>
	.m-comments {
		word-break: break-all!important;
		word-break: break-word!important;
	}
	
	.m-comments {
		word-wrap: break-word;
		word-break: break-all;
	}
	
	.m-comments .cmt_title {
		margin: 0;
		padding: 4px 10px;
		color: #666;
		font-size: 12px;
		font-weight: 400;
		background: rgba(0, 0, 0, .05);
	}
	
	.m-comments .cmt_item {
		padding-top: 10px;
		width: 100%;
		display: -webkit-flex;
		display: -webkit-box;
		display: flex;
		-webkit-flex-direction: row;
		-webkit-box-orient: horizontal;
		-webkit-box-direction: normal;
		flex-direction: row;
	}
	
	.m-comments .cmt_item .cmt_head {
		margin: 0 10px;
		-webkit-flex: none;
		-webkit-box-flex: 0;
		flex: none;
	}
	
	.m-talk .m-comments .cmt_item .cmt_head {
		height: 35px;
	}
	
	.m-comments a {
		color: #507daf;
		text-decoration: none;
	}
	
	.m-comments .cmt_head>a {
		position: relative;
		display: block;
	}
	
	.m-comments .cmt_item .cmt_head img {
		display: block;
		border-radius: 50%;
		width: 30px;
		height: 30px;
	}
	
	.m-comments .cmt_head>a .ava-icon {
		position: absolute;
		right: -5px;
		bottom: 0;
		width: 12px;
		height: 12px;
		background-image: url(../../public/img/iconlist.png);
		background-repeat: no-repeat;
		background-size: 75px auto;
	}
	
	.m-comments .ava-icon.ava-icon-daren {
		background-position: -40px 0;
	}
	
	.f-bd {
		position: relative;
	}
	
	.m-comments .cmt_item .cmt_wrap {
		padding-right: 10px;
		padding-bottom: 11px;
		padding-left: 10px;
		-webkit-flex: auto;
		-webkit-box-flex: 1;
		flex: auto;
		width: 0;
	}
	
	.m-comments .cmt_item .cmt_head+.cmt_wrap {
		padding-left: 0;
	}
	
	.m-comments .cmt_item .cmt_wrap .cmt_header {
		display: -webkit-flex;
		display: -webkit-box;
		display: flex;
		-webkit-flex-direction: row;
		-webkit-box-orient: horizontal;
		-webkit-box-direction: normal;
		flex-direction: row;
	}
	
	.m-comments .cmt_item .cmt_wrap .cmt_meta {
		-webkit-flex: auto;
		-webkit-box-flex: 1;
		flex: auto;
		width: 0;
		font-size: 0;
	}
	
	.m-comments .cmt_item .cmt_wrap .cmt_user {
		max-width: 100%;
		display: -webkit-inline-box;
		display: -webkit-inline-flex;
		display: inline-flex;
		-webkit-box-align: center;
		-webkit-align-items: center;
		align-items: center;
	}
	
	.m-comments a {
		color: #507daf;
		text-decoration: none;
	}
	
	.m-comments .cmt_item .cmt_wrap .cmt_user a {
		font-size: 14px;
		color: #666;
		line-height: 20px;
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
		-webkit-box-flex: 1;
		-webkit-flex: auto;
		flex: auto;
	}
	
	.m-comments .cmt_item .cmt_wrap .cmt_time {
		font-size: 9px;
		color: #999;
	}
	
	.m-comments .cmt_item .cmt_wrap .cmt_like {
		width: 65px;
		height: 22px;
		line-height: 22px;
		font-size: 11px;
		color: #999;
		-webkit-flex: none;
		-webkit-box-flex: 0;
		flex: none;
		text-align: right;
	}
	
	.m-comments .cmt_item .cmt_wrap .cmt_like .cmt_likearea {
		display: inline-block;
		min-width: 30px;
		padding-left: 5px;
	}
	
	.m-comments .cmt_item .cmt_wrap .cmt_like .cmt_count {
		vertical-align: middle;
	}
	
	.m-comments .cmt_item .cmt_wrap .cmt_like .cmt_likeicn {
		display: inline-block;
		width: 14px;
		height: 14px;
		margin-left: 6px;
		line-height: 0;
		vertical-align: middle;
		cursor: pointer;
	}
	
	.u-svg {
		display: inline-block;
		vertical-align: middle;
		background-position: 0 0;
		background-size: contain;
		background-repeat: no-repeat;
	}
	
	.m-comments .cmt_item .cmt_wrap .cmt_content {
		color: #333;
		font-size: 15px;
		line-height: 22px;
		margin-top: 5px;
	}
	
	.f-bd:after {
		position: absolute;
		z-index: 2;
		content: "";
		top: 0;
		left: 0;
		pointer-events: none;
		box-sizing: border-box;
		width: 100%;
		height: 100%;
		-webkit-transform-origin: top left;
		transform-origin: top left;
		border: 0 solid rgba(0, 0, 0, .1);
	}
	
	.f-bd-btm:after {
		border-bottom-width: 1px;
	}
	
	.m-comments .cmt_item .cmt_wrap .cmt_replied {
		margin: 5px 0;
		padding: 10px;
		color: #888;
		font-size: 14px;
		line-height: 21px;
	}
	
	.m-comments .cmt_item .cmt_wrap .cmt_replied .cmt_replied_user {
		vertical-align: middle;
	}
	
	.m-comments .cmt_item .cmt_wrap .cmt_emoji,
	.m-comments .cmt_item .cmt_wrap .cmt_express_noparse,
	.m-comments .cmt_item .cmt_wrap .cmt_text {
		vertical-align: middle;
	}
	
	.m-comments .cmt_item .cmt_wrap .cmt_emoji,
	.m-comments .cmt_item .cmt_wrap .cmt_express_noparse,
	.m-comments .cmt_item .cmt_wrap .cmt_text {
		vertical-align: middle;
	}
	
	.f-bd-full:after {
		border-width: 1px;
	}
	
	.m-talk .cmt_more {
		margin-left: 50px;
	}
	
	.m-talk .cmt_more .box {
		display: block;
		margin-right: 50px;
		padding: 18px 0;
		font-size: 14px;
		color: #999;
		text-align: center;
		line-height: 1;
	}
	
	.m-talk .cmt_more i {
		position: relative;
		top: -1px;
		display: inline-block;
		width: 15px;
		height: 15px;
		margin-left: 5px;
		background: url(../../public/img/right.png) no-repeat;
		background-size: 100%;
		vertical-align: middle;
	}
	
	.m-comments .cmt_item .cmt_wrap .cmt_user .vip {
		-webkit-box-flex: 0;
		-webkit-flex: 0 0 auto;
		flex: 0 0 auto;
		display: inline-block;
		margin: 0 5px;
	}
	
	.m-comments .cmt_item .cmt_wrap .cmt_user .vip-associator {
		width: 21px;
		height: 11px;
		background: url(../../public/img/vip.png) 0 0/contain no-repeat;
	}
</style>